<template>
  <div class="count-card" :style="{backgroundImage: `linear-gradient(${bgColor}, #9198e5)`}">
    <div class="title">
        {{ title }}
    </div>
    <div class="content">
        <CountTo :startVal="0" :endVal="value" v-bind="$attrs"/>
    </div>
    <div class="footer">
        <slot v-if="$slots.footer" name="footer"/>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
export default {
    props: {
        bgColor: {
            type: String,
            default: '#6ea1d4'
        },
        title: {
            type: String,
            required: true
        },
        value: {
            type: Number,
            required: true
        }
    },
    components: {
        CountTo
    },
  data() {
    return {}
  },
  computed: {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
    .count-card{
        display: flex;
        flex-direction: column;
        padding: 12px 12px 0;
        height: 100%;
        // background-image: linear-gradient(#6ea1d4, #9198e5);
        border-radius: 5px;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
        border: 1px solid #f0f0f0;
        color: #fff;
        .title{
           font-size: 14px;
           opacity: .65;
        }
        .content{
            flex: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }
        .footer{
            margin: 0 -12px;
            padding: 6px 12px;
            border-top: 1px solid #c9c8c8;
            font-size: 12px;
            opacity: 0.55;
        }
    }
</style>